<template>
    <div style="position: relative;">
        <div class="tt_top" @click="$router.push('/organizations')">{{ TITLE.organizations }}:{{ organizations }}</div>
        <div class="top">
            <div style="position: relative;">
                <h3>设备共享统计</h3>
                <div class="radio">
                    <el-radio-group v-model="searchEquip" size="small">
                        <el-radio-button label="日" value="day" />
                        <el-radio-button label="周" value="weak" />
                        <el-radio-button label="月" value="month" />
                        <el-radio-button label="年" value="year" />
                        <el-radio-button label="全部" value="all" />
                    </el-radio-group> <span style="margin-left: 12px;cursor: pointer;"
                        @click="$router.push('/equipment')">更多</span>
                </div>
                <div id="box1" @click="$router.push('/equipment')"></div>
            </div>
            <div :style="'padding: 10px;width:' + topBoxWidth">
                <Box2 id="box2"></Box2>
                <div id="box4">
                    <h3 style="margin-bottom: 4px;">双向转诊情况（近30日）</h3>
                    <Box4 :height="topBoxHeight" :width="topBoxWidth" @click="$router.push('/referral')"></Box4>
                </div>
            </div>
            <div style="position: relative;">
                <h3>双向转诊情况</h3>
                <el-radio-group class="radio" v-model="searchReferral" size="small">
                    <el-radio-button label="日" value="day" />
                    <el-radio-button label="周" value="weak" />
                    <el-radio-button label="月" value="month" />
                    <el-radio-button label="年" value="year" />
                    <el-radio-button label="全部" value="all" />
                </el-radio-group>
                <div id="box3" @click="$router.push('/referral')"></div>
            </div>
        </div>
        <div class="blank"></div>
        <div class="bottom">
            <div>
                <h3>智能穿戴设备统计</h3>
                <div style="display: flex;">
                    <div id="box5" @click="$router.push('/equip_1')"></div>
                    <div id="box6" @click="$router.push('/equip_2')"></div>
                    <div id="box7" @click="$router.push('/equip_3')"></div>
                    <div id="box8" @click="$router.push('/equip_4')"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { EDP, REANIMATIONTIME } from '@b/model/enum';
import { onMounted, ref, watch } from 'vue';
import { TITLE } from "@b/model/enum";
import { ElRadioButton, ElRadioGroup } from "element-plus";
import { Box1 } from "@/components/charts/box1";
import Box2 from "@/components/charts/box2.vue";
import { Box3 } from '@/components/charts/box3';
import Box4 from "@/components/charts/box4.vue";
import { Box5 } from '@/components/charts/box5';
import { Http } from '@b/model/base/http';

const topBoxsHeight = ref(EDP.HEIGHT / 3 + 80 + 'px')
const topBoxsWidth = ref(EDP.WIDTH / 4 + 'px')
const topBoxWidth = ref(EDP.WIDTH / 2 - 20 + 'px')
const topBoxHeight = ref(EDP.HEIGHT / 6 + 30 + 'px')
const bottomBoxsHeight = ref(EDP.HEIGHT / 3 + 'px')
const bottomBoxsWidth = ref(EDP.WIDTH / 4 + 'px')
const box1 = new Box1(topBoxsWidth.value, topBoxsHeight.value)
const box3 = new Box3(topBoxsWidth.value, topBoxsHeight.value)
const box5 = new Box5(bottomBoxsWidth.value, bottomBoxsHeight.value)
const box6 = new Box5(bottomBoxsWidth.value, bottomBoxsHeight.value)
const box7 = new Box5(bottomBoxsWidth.value, bottomBoxsHeight.value)
const box8 = new Box5(bottomBoxsWidth.value, bottomBoxsHeight.value)
const organizations = ref(0)

const searchEquip = ref('all')
const searchReferral = ref('all')

watch(searchEquip, (val) => {
    box1.changeData(val)
})
watch(searchReferral, (val) => {
    box3.changeData(val)
})
onMounted(async () => {
    box1.init()
    box3.init()
    box5.init('box5', TITLE.equip1, ['#00e462', '#0061df', '#d90025'])
    box6.init('box6', TITLE.equip2, ['#fca63b', '#00c4ef', '#00e462'])
    box7.init('box7', TITLE.equip3, ['#fca63b', '#d90025', '#00e462'])
    box8.init('box8', TITLE.equip4, ['#00c4ef', '#fbe744', '#0061df'])
    organizations.value = await new Http().request('/v1/bigscreen/CountWorkStation', { method: 'GET', cache: true })
    box1.changeData('all')
    box3.changeData('all')
    const getAcumulate = async () => {
        box5.changeData([])
        box6.changeData([])
        box7.changeData([])
        box8.changeData([])
    }
    getAcumulate()
    setInterval(async () => {
        getAcumulate()
    }, REANIMATIONTIME)
})
</script>

<style scoped>
.tt_top {
    position: absolute;
    right: 0;
    top: -60px;
    font-size: 1.4em;
    cursor: pointer
}

.top {
    display: flex;
    justify-content: space-between;
}

.bottom {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.radio {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
}

#box1,
#box3 {
    height: 100%;
    width: v-bind(topBoxsWidth);
}

#box2 {
    height: v-bind(topBoxHeight);
}

#box5,
#box6,
#box7,
#box8 {
    width: v-bind(bottomBoxsWidth);
    height: v-bind(bottomBoxsHeight);
}

#box4 {
    height: calc(v-bind(topBoxsHeight) / 2);
    margin-top: 12px;
}
</style>